import { BasicTableProps, TableActionType, useTable, TableRowSelection } from '/@/components/Table';
import { DynamicProps } from '/#/utils';
import { ColEx } from '/@/components/Form/src/types';
import { merge } from 'lodash-es';
import { reactive, Ref, ref } from 'vue';
import { FormActionType } from '/@/components/Form';

// 定义表格所需参数
type TableProps = Partial<DynamicProps<BasicTableProps>>;
type UseTableMethod = TableActionType & {
  getForm: () => FormActionType;
};

export function useJinhuiTable(tableProps: TableProps): [
  (instance: TableActionType, formInstance: UseTableMethod) => void,
  TableActionType & {
    getForm: () => FormActionType;
  },
  {
    rowSelection: TableRowSelection<Recordable>;
    selectedRows: Ref<Recordable[]>;
    selectedRowKeys: Ref<any[]>;
  },
] {
  // 自适应列配置
  const adaptiveColProps: Partial<ColEx> = {
    xs: 24, // <576px
    sm: 12, // ≥576px
    md: 12, // ≥768px
    lg: 8, // ≥992px
    xl: 8, // ≥1200px
    xxl: 6, // ≥1600px
  };
  const defaultTableProps: TableProps = {
    rowKey: 'id',
    // 使用查询条件区域
    useSearchForm: true,
    // 查询条件区域配置
    formConfig: {
      // 紧凑模式
      compact: true,
      // label默认宽度
      labelWidth: 120,
      // 按下回车后自动提交
      autoSubmitOnEnter: true,
      // 默认 row 配置
      rowProps: { gutter: 8 },
      // 默认 col 配置
      baseColProps: {
        ...adaptiveColProps,
      },
      labelCol: {
        xs: 24,
        sm: 8,
        md: 6,
        lg: 8,
        xl: 6,
        xxl: 6,
      },
      wrapperCol: {},
      // 是否显示 展开/收起 按钮
      showAdvancedButton: true,
      // 超过指定列数默认折叠
      //autoAdvancedCol: 3,
      //超过指定行数行默认折叠
      autoAdvancedLine: 1,
      // 操作按钮配置
      actionColOptions: {
        ...adaptiveColProps,
        style: { textAlign: 'left' },
      },
    },
    // 斑马纹
    striped: true,
    // 是否可以自适应高度
    canResize: true,
    // 表格最小高度
    // minHeight: 500,
    // 点击行选中
    clickToRowSelect: false,
    // 是否显示边框
    bordered: true,
    // 是否显示序号列
    showIndexColumn: true,
    indexColumnProps: {
      width: 50,
    },
    // 显示表格设置
    showTableSetting: true,
    // 表格设置
    tableSetting: {
      fullScreen: false,
    },
    // 是否显示操作列
    showActionColumn: false,
    // 操作列
    actionColumn: {
      width: 120,
      title: '操作',
      // 是否锁定操作列取值 right ,left,false
      // fixed: false,
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
    // 默认以 create_time 降序排序
    defSort: {
      orders: 'create_time:desc',
    },
  };
  // 合并用户个性化配置
  if (tableProps) {
    // merge 方法可深度合并对象
    if (tableProps.columns && tableProps.columns.length > 0) {
      tableProps.columns.forEach((el) => {
        el.resizable = true;
      });
    }
    merge(defaultTableProps, tableProps);
  }

  // 当前选择的行
  const selectedRowKeys = ref<any[]>([]);
  // 选择的行记录
  const selectedRows = ref<Recordable[]>([]);

  // 表格选择列配置
  const rowSelection: any = tableProps?.rowSelection ?? {};
  const defaultRowSelection = reactive({
    ...rowSelection,
    type: rowSelection.type ?? 'checkbox',
    // 选择列宽度，默认 50
    columnWidth: rowSelection.columnWidth ?? 50,
    selectedRows: selectedRows,
    selectedRowKeys: selectedRowKeys,
    preserveSelectedRowKeys: true,
    onChange(...args) {
      selectedRowKeys.value = args[0];
      selectedRows.value = args[1];
      if (typeof rowSelection.onChange === 'function') {
        rowSelection.onChange(...args);
      }
    },
  });
  delete defaultTableProps.rowSelection;

  return [
    ...useTable(defaultTableProps),
    {
      selectedRows,
      selectedRowKeys,
      rowSelection: defaultRowSelection,
    },
  ];
}
